<template>
  <div class="collection">
    <van-nav-bar
      title="收藏栏"
      left-text="返回"
      left-arrow
      @click-left="back"
    />

    <div v-if="collectionData.length > 0" class="collection-list">
      <div
        class="collectionList"
        v-for="(item, index) in collectionData"
        :key="index"
      >
        <div class="collectionImg">
          <img class="autoImg" :src="item.smallImg" />
        </div>
        <div class="collectionTitle">
          <div class="collectionName">
            <span>{{ item.name }}</span>
          </div>
          <div class="collectionEnName">
            <span>{{ item.enname }}</span>
          </div>
          <div class="collectionType">
            <span>类型:{{ item.typeDesc }}</span>
          </div>
        </div>
        <div class="collectionSet">
          <div class="collectionPrice">
            <span>&yen;{{ item.price }}</span>
          </div>
          <div class="collectionDelete" @click="removeCollection(item.pid)">
            <span>
              <van-icon name="delete-o" />
            </span>
          </div>
        </div>
      </div>
    </div>
    <div v-else>
      <van-empty description="还没有收藏哦" />
    </div>
  </div>
</template>

<script>
import "../assets/less/collection.less";
export default {
  name: "Collection",
  data() {
    return {
      collectionData: {},
    };
  },
  created() {
    this.getCllecion();
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    getCllecion() {
      let tokenString = this.$cookies.get("tokenString");

      if (!tokenString) {
        return;
      }
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });
      this.axios({
        method: "GET",
        url: this.baseUrl + "/findAllLike",
        params: {
          appkey: this.appkey,
          tokenString,
        },
      })
        .then((res) => {
          this.$toast.clear();

          if (res.data.code == 700) {
            return;
          }

          if (res.data.code === 2000) {
            if (res.data.result.length > 0) {
              this.collectionData = res.data.result;
            }
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.log("err ==> ", err);
        });
    },
    removeCollection(pid) {
      let tokenString = this.$cookies.get("tokenString");
      // let tokenString = localStorage.getItem("tokenString");

      if (!tokenString) {
        return this.$router.push({ name: "Login" });
      }
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });
      this.axios({
        method: "POST",
        url: this.baseUrl + "/notlike",
        data: {
          appkey: this.appkey,
          pid: pid,
          tokenString,
        },
      })
        .then((res) => {
          this.$toast.clear();

          if (res.data.code == 700) {
            this.$toast({
              message: res.data.msg,
              forbidClick: true,
              duration: 3000,
            });
            return this.$router.push({ name: "Login" });
          }

          if (res.data.code === 900) {
            if (res.data.result === 1) {
              this.getCllecion();
            }
          } else {
            this.$toast({
              message: res.data.msg,
              forbidClick: true,
              duration: 3000,
            });
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.log("err ==> ", err);
        });
    },
  },
};
</script>